<template>
    <div class="mvList">
      <div class="mvList-top" >
        <div>
          <svg class="icon" @click="$router.go(-1)">
            <use xlink:href="#icon-zuo1"></use>
          </svg>
        </div>
        <h1>{{name}}</h1>
      </div>
      <mvPlay  v-if="mvs"></mvPlay>
    </div>
</template>
<script>
import { useRoute } from 'vue-router'
import { setmvlist } from '@/api/index.js'
import mvPlay from './mvPlay.vue'
export default {
  data () {
    return {
      mvs: '',
      name: ''
    }
  },
  async mounted () {
    const route = useRoute()
    const id = route.query.id
    this.name = route.query.name
    const mv = await setmvlist(id)
    this.mvs = mv.data.data.url
    console.log(this.mvs)
    this.$store.commit('setMvUrl', this.mvs)
  },
  components: {
    mvPlay
  }
}
</script>
<style lang="less" scoped>
.mvList{
     width: 7.5rem;
    .mvList-top{
        display: flex;
        width: 7.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding-bottom: 0.1rem;
        .icon{
            width: 0.6rem;
            height: 0.6rem;
        }
        h1{
            width: 3rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 1.8rem;
        }
    }
}
</style>
